<template>
  <div class="app-container">
    <div class="custom_card_0" v-show="showSearch">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="68px"
        size="small"
      >
        <el-form-item label1 label="油卡公司" prop="cardCompany">
          <el-select
            v-model="queryParams.cardCompany"
            placeholder="油卡公司筛选"
          >
            <el-option
              v-for="item in supplierList"
              :key="item.id"
              :label="item.name"
              :value="parseInt(item.id)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label1 label="油卡号" prop="cardNo">
          <el-input
            v-model="queryParams.cardNo"
            placeholder="油卡号筛选"
            clearable
          />
        </el-form-item>
        <el-form-item label1 label="持卡人" prop="cardholder">
          <el-input
            v-model="queryParams.cardholder"
            placeholder="持卡人筛选"
            clearable
          />
        </el-form-item>
        <el-form-item label1 label="油卡状态" prop="isAvailable">
          <el-select v-model="queryParams.isAvailable" placeholder="状态筛选">
            <el-option label="停用" :value="0"></el-option>
            <el-option label="启用" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="custom_card">
      <el-row :gutter="10" class="mb10">
        <el-col :span="1.5">
          <el-button
            class="first-plain-btn" size="medium"
            icon="el-icon-plus"
            @click="handleAdd"
            v-hasPermi="['oilCard:oilCard:add']"
            >新增
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            class="sec-plain-btn" size="medium"
            icon="el-icon-download"
            :loading="exportLoading"
            @click="handleExport"
            v-hasPermi="['oilCard:oilCard:export']"
            >导出
          </el-button>
        </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="oilCardList" border>
        <el-table-column
          label="发卡日期"
          align="center"
          prop="issuingDate"
          min-width="160"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.issuingDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="油卡号"
          align="center"
          prop="cardNo"
          min-width="160"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="油卡公司"
          align="center"
          prop="cardCompanyName"
          min-width="200"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="当前余额"
          align="center"
          prop="balance"
          min-width="160"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope"> ¥{{ scope.row.balance }} </template>
        </el-table-column>
        <el-table-column
          label="本月加油/次"
          align="center"
          prop="number"
          min-width="160"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="持卡人"
          align="center"
          prop="cardholder"
          min-width="160"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="油卡状态"
          align="center"
          prop="isAvailable"
          min-width="120"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.sys_available"
              :value="scope.row.isAvailable"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="left"
          align="center"
          class-name="small-padding fixed-width"
          width="200"
        >
          <template slot-scope="scope">
            <el-button
              size="small"
              type="text"
              @click="handleDetail(scope.row)"
              v-hasPermi="['oilCard:oilCard:query']"
              >查看
            </el-button>
            <el-button
              size="small"
              type="text"
              :disabled="!scope.row.isAvailable == 0"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['oilCard:oilCard:edit']"
              >修改
            </el-button>
            <el-button
              size="small"
              type="text"
              :disabled="!scope.row.isAvailable == 0"
              @click="handleDelete(scope.row)"
              v-hasPermi="['oilCard:oilCard:remove']"
              >删除
            </el-button>

            <el-button
              size="small"
              type="text"
              @click="handleAvailable(scope.row, 1)"
              v-if="scope.row.isAvailable == 0"
              v-hasPermi="['oilCard:oilCard:edit']"
              >启用</el-button
            >
            <el-button
              size="small"
              type="text"
              @click="handleAvailable(scope.row, 0)"
              v-if="scope.row.isAvailable == 1"
              v-hasPermi="['oilCard:oilCard:edit']"
              >停用</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 添加或修改油卡对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="发卡日期" prop="issuingDate">
              <el-date-picker
                clearable
                size="small"
                style="width: 100%"
                v-model="form.issuingDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择发卡日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="油卡公司" prop="cardCompany">
              <el-select
                v-model="form.cardCompany"
                style="width: 100%"
                placeholder="请选择油卡公司"
                class="el-input-style"
                @change="checkSupplier"
                filterable
                remote
              >
                <el-option
                  v-for="item in supplierList"
                  :key="item.id"
                  :label="item.name"
                  :value="parseInt(item.id)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="油卡号" prop="cardNo">
              <el-input
                v-model="form.cardNo"
                placeholder="请输入油卡号"
                :maxlength="25"
                show-word-limit
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="持卡人" prop="cardholder">
              <el-input v-model="form.cardholder" placeholder="请输入持卡人" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="油卡照片">
              <imageUpload
                v-model="form.photo"
                v-bind:limit="1"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 详情 -->
    <el-dialog
      :title="title"
      :visible.sync="openDetail"
      width="800px"
      append-to-body
    >
      <el-form ref="form" :model="form" label-width="100px">
        <MmvTitle title="油卡信息"></MmvTitle>
        <el-row style="padding: 0px 25px 20px">
          <el-col :sm="24" :md="24" :lg="24">
            <el-descriptions
              :column="2"
              border
              :labelStyle="{ width: '120px' }"
            >
              <el-descriptions-item label-class-name="my-descriptions-label"  span="2">
                <template slot="label">油卡号</template>
                {{ form.cardNo }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" >
                <template slot="label">持卡人</template>
                {{ form.cardholder }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" >
                <template slot="label">当前余额</template>
                {{ form.balance }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" >
                <template slot="label">油卡公司</template>
                {{ form.cardCompanyName }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" >
                <template slot="label">发卡日期</template>
                {{ form.issuingDate }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" >
                <template slot="label">油卡照片</template>
                <el-image
                  v-if="form.photo"
                  :src="getImgUrl(form.photo)"
                  :preview-src-list="[getImgUrl(form.photo)]"
                  style="width: 120px; height: 80px"
                  fit="cover"
                ></el-image>
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </el-form>
      <MmvTitle title="充值记录">
        <el-button
          slot="btn"
          type="warning"
          plain
          icon="el-icon-download"
          size="small"
          :loading="exportLoading"
          @click="exportRechargeRecord"
          >导出
        </el-button>
      </MmvTitle>
      <el-row style="padding: 0px 25px 20px">
        <el-col :sm="24" :md="24" :lg="24">
          <el-table v-loading="loading" :data="rechargeRecordList" border>
            <el-table-column
              label="充值时间"
              align="center"
              prop="reimbursementTime"
              min-width="140"
              show-overflow-tooltip
            />
            <el-table-column
              label="财务状态"
              align="center"
              prop="settlementStatus"
              min-width="140"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.settlement_status"
                  :value="scope.row.settlementStatus"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="充值金额"
              align="center"
              prop="reimbursementAmount"
              min-width="140"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                ¥{{ scope.row.reimbursementAmount }}
              </template>
            </el-table-column>
            <el-table-column
              label="经办人"
              align="center"
              prop="userName"
              min-width="140"
              show-overflow-tooltip
            />
          </el-table>
          <pagination
            v-show="rechargeRecordParams.total > 0"
            :total="rechargeRecordParams.total"
            :page.sync="rechargeRecordParams.pageNum"
            :limit.sync="rechargeRecordParams.pageSize"
            @pagination="getRechargeRecord"
          />
        </el-col>
      </el-row>
      <MmvTitle title="加油记录">
        <el-button
          slot="btn"
          type="warning"
          plain
          icon="el-icon-download"
          size="small"
          :loading="exportLoading"
          @click="exportRefuelingRecord"
          >导出
        </el-button>
      </MmvTitle>
      <el-row style="padding: 0px 25px 20px">
        <el-col :sm="24" :md="24" :lg="24">
          <el-table v-loading="loading" :data="refuelingRecordList" border>
            <el-table-column
              label="加油日期"
              align="center"
              prop="refuelingDate"
              min-width="140"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>{{
                  parseTime(scope.row.refuelingDate, '{y}-{m}-{d}')
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="加油车辆"
              align="center"
              prop="carNo"
              min-width="140"
              show-overflow-tooltip
            />
            <el-table-column
              label="加油金额"
              align="center"
              prop="refuelingAmount"
              min-width="140"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                ¥{{ scope.row.refuelingAmount }}
              </template>
            </el-table-column>
            <el-table-column
              label="加油前公里数"
              align="center"
              prop="kilometers"
              min-width="140"
              show-overflow-tooltip
            />
            <el-table-column
              label="加油人"
              align="center"
              prop="oiler"
              min-width="140"
              show-overflow-tooltip
            />
          </el-table>

          <pagination
            v-show="refuelingRecordParams.total > 0"
            :total="refuelingRecordParams.total"
            :page.sync="refuelingRecordParams.pageNum"
            :limit.sync="refuelingRecordParams.pageSize"
            @pagination="getRefuelingRecord"
          />
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listOilCard,
  getOilCard,
  delOilCard,
  addOilCard,
  updateOilCard,
  exportOilCard,
  getSupplierList,
  stopUsingEnabled,
  rechargeRecord,
  exportRecharge,
} from '@/api/car/oilCard'
import MmvTitle from '@/components/MmvUI/MmvTitle'
import { listRecord, exportRecord } from '@/api/car/refuelingRecord'

export default {
  name: 'OilCard',
  dicts: ['sys_available', 'settlement_status'],
  components: {
    MmvTitle,
  },
  data() {
    return {
      supplierList: [],
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 油卡表格数据
      oilCardList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      openDetail: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        issuingDate: null,
        cardCompany: null,
        cardCompanyName: null,
        cardNo: null,
        balance: null,
        photo: null,
        cardholder: null,
        isAvailable: null,
        tenantId: null,
      },
      refuelingRecordParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      refuelingRecordList: [],
      rechargeRecordParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      rechargeRecordList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        issuingDate: [
          {
            required: true,
            message: '发卡日期不能为空',
            trigger: 'change',
          },
        ],
        cardNo: [
          {
            required: true,
            message: '卡号不能为空',
            trigger: 'change',
          },
        ],
        balance: [
          {
            required: true,
            message: '余额不能为空',
            trigger: 'change',
          },
        ],
      },
    }
  },
  created() {
    this.getList()
    getSupplierList(4).then((response) => {
      this.supplierList = response.data
    })
  },
  methods: {
    getRefuelingRecord() {
      let queryParams = {
        ...this.refuelingRecordParams,
        oilCardId: this.form.id,
      }
      listRecord(queryParams).then((response) => {
        this.refuelingRecordList = response.rows
        this.refuelingRecordParams.total = response.total
        this.loading = false
      })
    },
    getRechargeRecord() {
      let queryParams = {
        ...this.rechargeRecordParams,
        id: this.form.id,
      }
      rechargeRecord(queryParams).then((response) => {
        this.rechargeRecordList = response.rows
        this.rechargeRecordParams.total = response.total
        this.loading = false
      })
    },
    /** 导出充值记录 */
    exportRechargeRecord() {
      let queryParams = {
        ...this.rechargeRecordParams,
        id: this.form.id,
      }
      this.$modal
        .confirm('是否确认导出充值记录？')
        .then(() => {
          this.exportLoading = true
          return exportRecharge(queryParams)
        })
        .then((response) => {
          this.$download.name(response.msg)
          this.exportLoading = false
        })
        .catch(() => {})
    },
    /** 导出加油记录 */
    exportRefuelingRecord() {
      let queryParams = {
        ...this.refuelingRecordParams,
        oilCardId: this.form.id,
      }
      this.$modal
        .confirm('是否确认导出加油记录？')
        .then(() => {
          this.exportLoading = true
          return exportRecord(queryParams)
        })
        .then((response) => {
          this.$download.name(response.msg)
          this.exportLoading = false
        })
        .catch(() => {})
    },
    /** 查询油卡列表 */
    getList() {
      this.loading = true
      listOilCard(this.queryParams).then((response) => {
        this.oilCardList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    checkSupplier() {
      this.form.cardCompanyName = this.supplierList.filter((item) => {
        if (item.id == this.form.cardCompany) {
          return item.name
        }
      })[0].name
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.openDetail = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        issuingDate: null,
        cardCompany: null,
        cardCompanyName: null,
        cardNo: null,
        balance: null,
        photo: null,
        cardholder: null,
        delFlag: null,
        isAvailable: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        tenantId: null,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加油卡'
    },
    /** 查看 */
    handleDetail(row) {
      this.reset()
      const id = row.id || this.ids
      getOilCard(id).then((response) => {
        this.form = response.data
        this.openDetail = true
        this.title = '油卡详情'
        this.getRefuelingRecord()
        this.getRechargeRecord()
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getOilCard(id).then((response) => {
        this.form = response.data
        this.open = true
        this.title = '修改油卡'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateOilCard(this.form).then((response) => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addOilCard(this.form).then((response) => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 启用/停用 */
    handleAvailable(row, available) {
      stopUsingEnabled({
        id: row.id,
        isAvailable: available,
      }).then((response) => {
        this.$modal.msgSuccess('操作成功')
        this.getList()
      })
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal
        .confirm('是否确认删除油卡？')
        .then(function () {
          return delOilCard(ids)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$modal
        .confirm('是否确认导出所有油卡数据项？')
        .then(() => {
          this.exportLoading = true
          return exportOilCard(queryParams)
        })
        .then((response) => {
          this.$download.name(response.msg)
          this.exportLoading = false
        })
        .catch(() => {})
    },
  },
}
</script>
